<template>
  <div>
    <h1>TensorFlow.js Object Detection</h1>
    <video width="400" height="300"></video>
    <p></p>
    <img width="400" height="300" />
    1
    <div>
     
      <canvas id="canvas" width="400" height="300"></canvas>
    </div>


    
  </div>
</template>

<script>
//识别
import * as cocossd from "@tensorflow-models/coco-ssd";
//回复
// import * as mobilenet from "@tensorflow-models/qna";

// import "https://unpkg.com/@tensorflow/tfjs"
import * as tf from "@tensorflow/tfjs";
export default {
  //在浏览器中使用 MobileNet 进行摄像头物体识别

  mounted() {
    const video = document.querySelector("video");
    const image = document.querySelector("img");
    const status = document.querySelector("p");

    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");

    var classifyModel
    main();
     //step1：加载摄像头
    async function main() {
      console.log("加载中")
     
      console.log("加载完成")
      const stream = await navigator.mediaDevices.getUserMedia({ video: true });
      video.srcObject = stream;
      await video.play();

      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;

      refresh();
    }
    // step2：加载摄像机，绘图
    async function refresh() {
      ctx.drawImage(video, 0, 0);
      //渲染到img上
      image.src = canvas.toDataURL("image/png");
      classifyModel = await cocossd.load();
      var predictions = await classifyModel.detect(image);
      // var className = predictions[0]?predictions[0].class:"暂时没办法识别";
      // var percentage = Math.floor(100 * predictions[0]?predictions[0].score:"0");
      let className = predictions[0].class;
      let percentage = Math.floor(100 * predictions[0].score);
      status.innerHTML = percentage + "%" + " " + className;

      let result = predictions
      const c = document.getElementById("canvas");
      const context = c.getContext("2d");
      context.drawImage(image, 0, 0);
      context.font = "10px Arial";
      
      console.log("number of detections: ", result.length);
      for (let i = 0; i < result.length; i++) {
        context.beginPath();
        context.rect(...result[i].bbox);
        context.lineWidth = 1;
        context.strokeStyle = "green";
        context.fillStyle = "green";
        context.stroke();
        context.fillText(
          result[i].score.toFixed(3) + " " + result[i].class,
          result[i].bbox[0],
          result[i].bbox[1] > 10 ? result[i].bbox[1] - 5 : 10
        );
      }

      setTimeout(refresh, 100);
    }

    // step3：识别一张图 这里的img要加上<img width="400" height="300" src="image1.png" class="single"/>
    // async function refresh() {
      
    //   const predictions = await classifyModel.detect(document.querySelector(".single"););
    //   console.log("识别一张图: ",predictions)
    // }

    



  },
};
</script>

<style lang="scss" scoped></style>
